<template>
<div class="body-wrapper">
  <div class="index-container">
    <div class="hd-index">
      <div class="index-header">
        <router-link to="/">
          <img src="../assets/logo-new.png" />
        </router-link>
        <div class="logon" v-if="!logined">
            <a href="javascript:;" title="登录" @click="dialogFormVisible = true">登录</a>
            <span>|</span>
            <router-link to="/register">注册</router-link>
            <span>|</span>
            <a href="http://www.jshtcm.com">首页</a>
          </div>
          <div class=" fr " v-else>
            <span class="t3">欢迎您：</span> {{person.personName}}
           <span class="t3"> | </span>
            <a href="javascript:;" @click.prevent="logout" class="logout">退出</a>
           <span class="t3"> | </span>
            <a href="http://www.jshtcm.com">首页</a>
          </div>
      </div>
    </div>

    <el-dialog :visible.sync="dialogFormVisible" custom-class="login-form">
      <login-form></login-form>
    </el-dialog>

    <div class="hd-index">
      <div class="slider-wrapper" @mouseover="mouseoverHandle" @mouseout="mouseoutHandle">
      <a href="javascript:;" class="sprites prev" @click="prev"></a>
      <a href="javascript:;" class="sprites next" @click="next"></a>
      <div class="imgs" ref="imgs">
        <a href="#">
          <img src="../assets/nav-1.png" />
        </a>
        <router-link to="/yygh">
          <img src="../assets/nav-2.png" />
        </router-link>
        <router-link to="/report">
          <img src="../assets/nav-3.png" />
        </router-link>
        <router-link to="/classroom">
          <img src="../assets/nav-4.png" />
        </router-link>
        <router-link to="/cloud">
          <img src="../assets/nav-5.png" />
        </router-link>
        <router-link to="/mall">
          <img src="../assets/nav-6.png" />
        </router-link>
      </div>
    </div>
    </div>
   <footer class="copyright2">
    <p>Copyright 2012-2014 江苏省中医院 All right reserved   网站备案/许可证号：<a href="http://www.miitbeian.gov.cn" target="_blank">苏ICP备05011462号-1</a>    技术支持：<a href="http://www.bsoft.com.cn" target="_blank">创业软件股份有限公司</a></p>
    <p>地址：南京市秦淮区汉中路155号   联系电话：025-86618472、86518612、86617141-20300/20130</p>
  </footer>

  </div>
  
  </div>
</template>
<script>
import AppFooter from '../components/AppFooter'
import LoginForm from '../components/LoginForm'
// 自动轮播间隔
const SLIDE_DELAY = 3000
export default {
  name: 'Index',
  data () {
    return {
      pos: [
        {
          x: 180,
          y: 100
        },
        {
          x: 480,
          y: 50
        },
        {
          x: 780,
          y: 100
        },
        {
          x: 780,
          y: 300
        },
        {
          x: 480,
          y: 350
        },
        {
          x: 180,
          y: 300
        }
      ],
      timer: null,
      dialogFormVisible: false,
      person: JSON.parse(localStorage.person || '{"personName": ""}')
    }
  },
  components: {
    LoginForm, AppFooter
  },
  computed: {
    logined () {
      return localStorage.accessToken !== undefined
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.reset()
      this.mouseoutHandle()
    })
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
  methods: {
    prev () {
      let temp = []
      for (let i = 0, len = this.pos.length; i < len; i++) {
        i === 0 ? temp[i] = this.pos[len - 1] : temp[i] = this.pos[i - 1]
      }
      this.pos = temp
      this.reset(100)
    },
    next () {
      let temp = []
      for (let i = 0, len = this.pos.length; i < len; i++) {
        i === (len - 1) ? temp[i] = this.pos[0] : temp[i] = this.pos[i + 1]
      }
      this.pos = temp
      this.reset(100)
    },
    reset (delay = 500) {
      let img = document.querySelectorAll('.imgs>a')
      for (let i = 0; i < img.length; i++) {
        setTimeout(() => {
          img[i].style.left = this.pos[i].x + 'px'
          img[i].style.top = this.pos[i].y + 'px'
        }, delay)
      }
    },
    mouseoverHandle () {
      this.timer && clearInterval(this.timer)
    },
    mouseoutHandle () {
      this.timer && clearInterval(this.timer)
      this.timer = setInterval(this.next, SLIDE_DELAY)
    },
    logout () {
      localStorage.removeItem('accessToken')
      location.reload()
    }
  }
}
</script>
<style lang="less">
@import '../common/css/app.less';
html,
body {
  width: 100%;
  height: 100%;
}

.body-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background:url(../assets/bg.jpg) no-repeat;
  background-size: cover;
}

.index-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.hd-index {
  width: 1080px;
  margin: auto;
}

.index-header {
  padding-top: 40px;
}

.slider-wrapper {
  position: relative;
  overflow: hidden;
  height: 500px;
  background: url(../assets/line.png) no-repeat center center;
  transition: margin-top .5s;
  .prev, .next{
    width: 34px;
    height: 48px;
    position: absolute;
    top: 45%;
    cursor: pointer;
    display: block;
  }
  .prev {
    background-position: -275px 0;
    left: 0;
    &:hover {
      background-position: -275px -50px;
    }
  }
  .next {
    background-position: -240px 0;
    right: 0;
    &:hover {
      background-position: -240px -50px;
    }
  }
  .imgs {
    a {
      display: block;
      position: absolute;
      width: 180px;
      height: 120px;
      top: 200px;
      left: 480px;
      transition: all .6s;
      &:hover {
        transform: scale(1.2);
      }
      img {
        width: 180px;
        height: 120px;
        border-radius: 6px;
        box-shadow: 1px 1px 5px rgba(0, 0, 0, .3)
      }
    }
  }
}
@media (min-height: 900px) {
  .slider-wrapper {
    margin-top: 10%;
  }
}
.copyright2 {
  background: #fff;
  position: fixed;
  padding: 20px;
  bottom: 0;
  text-align: center;
  width: 100%;
  font-size: 12px;
  color:#666;
}
.copyright2 a{
  color: #666;
}
.copyright2 a:hover{
  color: #9E310F;
}
</style>
